import React, { Component } from 'react';

import "./VideoList.css";


import none from "../images/placehold.png";
import video_placehold from "../images/video_placehold.png";

class VideoList extends Component {
    state = { 
        videoList:[],
        clickIndex:-1,
     }
   
     showVideo(index){
        this.props.openMask()
        this.setState({
            clickIndex:index,
            videoPlayMask:true
        })
    }

    closeVideo(){
        this.props.closeMask()
        this.setState({
            videoPlayMask:false,
            clickIndex:-1
        })
    }

    getSnapshotUrl(url,placeholdUrl){
        return url==null ? placeholdUrl : url
    }

    render() {
        let videoList=this.props.videoList;
        let num=this.props.num;

        return (
            <div className="videolist-content-wrap">

                <div className={videoList.length>0?'show':'hide'}>
                    <p className="videolist-title">视频数量 <span className="video-number">{num}</span></p>
                    <ul>
                        {
                            videoList.map((value,index)=>{
                                console.log("快照是：",value.snapshotUrl)


                                return (
                                    <li key={index}>
                                        <div className={this.state.clickIndex==index ?'show video-play-wrap test':'hide video-play-wrap test'}> 
                                            <video src={value.origUrl} controls="controls"  className="test">{index}</video>
                                            <div className="close"  onClick={()=>{this.closeVideo()}}></div>
                                        </div>
                                    
                                        <div className="img-wrap" onClick={()=>{this.showVideo(index)}}>
                                            <div className="play-icon"></div>
                                            <img src={this.getSnapshotUrl(value.snapshotUrl,video_placehold)} width="176" height="112" />
                                        </div>
        
                                        <div className="video-item-right">
                                            <p>{value.name}</p>
                                            <div className="browser-wrap">
                                                <span className="brower-number">浏览量:{value.pv}</span>
                                                <div className="del-input" id={value.vid} onClick={ this.props.delInfo.bind(this) }>删除</div>
                                            </div>
                                        </div>
                                    </li>
                                )
                            })
                        }
                    </ul>
                    {this.props.children}
                </div>

                <div className={videoList.length==0?'listflex':'hide'} >
                    <div className="list-none">
                        <div className="list-none-title">视频数量 <text>0</text></div>
                        <div className="list-none-content">
                            <div className="list-none-img"><img src={none} /></div>
                        </div>
                        <div className="list-none-foot">您还没有上传视频，点击上传按钮。</div>
                    </div>
                </div>
            </div>
        );
    }
}

export default VideoList;